<template>
    <div class="swiper-container">
    <div class="swiper-wrapper">
      <div 
        class="swiper-slide"
        v-for="item in swiper"
        :key="item.id"
      >
        <img :src="item.img" :alt="item.title">
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>
</template>

<script>
import Swiper from 'swiper'

export default {
  name: 'home',
  data () {
    return {
      swiper: []
    }
  },
  created () {
    this.$http.getSwiper()
      .then(resp => {
        this.swiper = resp
        this.$nextTick()
          .then(() => {
            this.initSwiper()
          })
      })
  },
  methods: {
    initSwiper () {
      this.$homeSwiper = new Swiper ('.swiper-container', {
        loop: true, // 循环模式选项
        
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        }
      })        
    }
  }
}
</script>

<style lang='scss'>
@import 'swiper/dist/css/swiper.css';
.swiper-container {
  width: 100%;
  height: 0;
  padding-top: percentage( 540 / 1080);
  .swiper-wrapper{
    position: absolute;
    top: 0;
    left: 0;

    img {
      max-width: 100%;
    }
  }
}
</style>
